<template>
        <el-menu-item>
          <el-popover placement="bottom" trigger="hover" :index="headerList.id" transition="popover-transform">
            <span>             
              <img :src="HeaderListtoLowerCase(headerList.title)" width="250"/>
            </span>
            <el-menu-item slot="reference">{{headerList.title}}<span><i class="el-icon-caret-top"></i></span></el-menu-item>
          </el-popover>        
        </el-menu-item>
 </template>
 
 <script>
 export default {
       name:'HeaderItem',
       props:['headerList'],
       methods:{
        HeaderListtoLowerCase(headerListtitle){
          let headerSrc=require("../assets/imgs/"+headerListtitle.toLowerCase()+".png")
          return headerSrc
        }
       }
 }
 </script>
 
 <style scoped>
 .popover-transform-enter-active,
.popover-transform-leave-active {
  transition: all .5s;
}
.popover-transform-enter,
.popover-transform-leave-to {
  opacity: 0;
  transform:  scale(0.2);
}
  .el-menu-item:hover{
    background: white;
    opacity: 0.7;
    transition: all .5s;
  }
 .el-menu-item{
  border: none;
  font-weight: 600;
  font-size: 1rem;
  background-color: white;
 
}
.el-menu.el-menu--horizontal{
  border: none;
  
}
.el-menu{
  height: auto !important;
}
.el-icon-caret-top{
  position: relative;
  bottom: 8%;
  color: black;
}
.el-menu-item .el-icon-caret-top{
  transition: all .5s;
}
.el-menu-item:hover .el-icon-caret-top{
  transition: all .5s;
  transform: rotate(180deg);
}
 </style>